<template>
  <div class="mod-config">
    <!-- 每日汇总 -->
    <div class="dayreport">
      <div class="firstTable" v-loading="tableLoading">
        <div class="tableSelect">
          <div class="leftNameList">
            <div class="nameBlock headBox">自动爬取</div>
            <div class="nameBlock">每日产销差 （高压管道）</div>
            <div class="nameBlock">每日产销差 （低压管道）</div>
            <div class="nameBlock">漏损率 （低压管道）</div>
            <div class="nameBlock">漏损率 （高压管道）</div>
            <div class="nameBlock">每日产销差（泵站）</div>
            <div class="nameBlock">每日产销差（三水片区）</div>
            <div class="nameBlock">每日产销差（金沙丹灶片区）</div>
            <div class="nameBlock">每日产销差（禅城片区）</div>
            <div class="nameBlock">每日产销差（西樵片区）</div>
            <div class="nameBlock">累计产销差</div>
            <div class="nameBlock">每日总产销差</div>
          </div>
          <div class="rightDataPart" ref="mortalTable">
            <div
              class="rightNameList"
              v-for="(item, index) in autoDataList"
              :key="index"
            >
              <div class="nameBlock headBox">{{ item.dateTime }}</div>
              <div class="nameBlock">
                {{
                  typeof item.dailyHighProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyHighProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyLowProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyLowProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyLowLeakRate == "string"
                    ? "/"
                    : item.dailyLowLeakRate.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyHighLeakRate == "string"
                    ? "/"
                    : item.dailyHighLeakRate.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfPumpStation ==
                  "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfPumpStation.toFixed(
                        2
                      ) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfSanShui == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfSanShui.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfJinSha == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfJinSha.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfChanCheng ==
                  "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfChanCheng.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfXiQiao == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfXiQiao.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.accumulatedProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.accumulatedProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyTotalProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyTotalProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyTotalProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyTotalProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="firstTable" v-loading="tableLoading">
        <div class="tableSelect">
          <div class="leftNameList">
            <div class="nameBlock headBox">手动爬取</div>
            <div class="nameBlock">每日产销差 （高压管道）</div>
            <div class="nameBlock">每日产销差 （低压管道）</div>
            <div class="nameBlock">漏损率 （低压管道）</div>
            <div class="nameBlock">漏损率 （高压管道）</div>
            <div class="nameBlock">每日产销差（泵站）</div>
            <div class="nameBlock">每日产销差（三水片区）</div>
            <div class="nameBlock">每日产销差（金沙丹灶片区）</div>
            <div class="nameBlock">每日产销差（禅城片区）</div>
            <div class="nameBlock">每日产销差（西樵片区）</div>
            <div class="nameBlock">累计产销差</div>
            <div class="nameBlock">每日总产销差</div>
          </div>
          <div class="rightDataPart" ref="handsTable">
            <div
              class="rightNameList"
              v-for="(item, index) in copyDataList"
              :key="index"
            >
              <div class="nameBlock headBox">{{ item.dateTime }}</div>
              <div class="nameBlock">
                {{
                  typeof item.dailyHighProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyHighProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyLowProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyLowProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyLowLeakRate == "string"
                    ? "/"
                    : item.dailyLowLeakRate.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyHighLeakRate == "string"
                    ? "/"
                    : item.dailyHighLeakRate.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfPumpStation ==
                  "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfPumpStation.toFixed(
                        2
                      ) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfSanShui == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfSanShui.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfJinSha == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfJinSha.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfChanCheng ==
                  "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfChanCheng.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyProductionAndSalesDifferOfXiQiao == "string"
                    ? "/"
                    : item.dailyProductionAndSalesDifferOfXiQiao.toFixed(2) +
                      "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.accumulatedProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.accumulatedProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyTotalProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyTotalProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
              <div class="nameBlock">
                {{
                  typeof item.dailyTotalProductionAndSalesDiffer == "string"
                    ? "/"
                    : item.dailyTotalProductionAndSalesDiffer.toFixed(2) + "%"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      tableLoading: false,
      startTime: null, // 开始时间
      endTime: null, // 结束时间
      time: [],
      autoDataList: [], // 自动爬取数据
      copyDataList: [], // 手抄爬取数据
      dayTimeOptions: [],
      dom: null,
      theOterDom: null
    };
  },
  mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.mortalTable;
    this.dom.addEventListener("scroll", () => {
      this.$refs.handsTable.scrollLeft = this.dom.scrollLeft;
    });
    // this.theOterDom = this.$refs.handsTable;
    // this.theOterDom.addEventListener('scroll', () => {
    //   this.$refs.mortalTable.scrollLeft = this.theOterDom.scrollLeft
    // });
  },
  methods: {
    // 获取数据列表
    init(timeGroup) {
      this.tableLoading = true;
      this.time = timeGroup;
      this.startTime = timeGroup[0];
      this.endTime = timeGroup[1];
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(
            "/cms/dailySummary/salesOutputRatioOfEachArea"
          ),
          method: "get",
          params: this.$http.adornParams({
            startDate: this.startTime,
            endDate: this.endTime
          })
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.autoDataList = data.salesOutputRatioOfEachArea.autoList;
              this.copyDataList = data.salesOutputRatioOfEachArea.copyList;
              this.tableLoading = false;
            } else {
              this.autoDataList = [];
              this.copyDataList = [];
              this.tableLoading = false;
            }
          })
          .catch(() => {
            this.tableLoading = false;
          });
      });
    }
  }
};
</script>
<style lang="scss">
::-webkit-scrollbar {
  height: 8px;
  position: absolute;
  left: 0;
  bottom: -6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
